<style lang="less">
  @import './question_selects.less';
</style>
<template>
  <div>
    <Form :model="seachForm" inline :label-width="80" v-show="!isEditing">
      <FormItem prop="id" :label="$t('id')">
        <Input v-model="seachForm.id" placeholder="请输入查询文字"></Input>
      </FormItem>
      <FormItem prop="info" :label="$t('info')">
        <Input v-model="seachForm.info" placeholder="请输入查询文字"></Input>
      </FormItem>
      <br/>
      <FormItem prop="subjectId" :label="$t('subjectId')"><!--课程-->
             <!--Input v-model="extraSeachForm.subjectId" placeholder="请输入查询文字"></Input-->
             <Input v-model="extraSeachForm.subjectId" placeholder="请输入查询文字"></Input>
             <template> 
               <i-select v-model="extraSeachForm.subjectId"  style="width:200px" not-found-text="无课程" @on-change="subjectNumberChange"> 
               <i-option v-for="item in subjectDatas" clearable :value="item.id" v-bind:key="item.id">
                 {{ item.id +"："+item.name}}
                 </i-option> </i-select> 
                 </template>
      </FormItem>
      <FormItem prop="chapterId" :label="$t('chapterId')"><!--章节-->
      <Input v-model="extraSeachForm.chapterId" placeholder="请输入查询文字"></Input>
             <template> 
               <i-select v-model="extraSeachForm.chapterId"  style="width:200px" not-found-text="无课程" @on-change="chaptertNumberChange"> 
               <i-option v-for="item in chapterDatas" clearable :value="item.id" v-bind:key="item.id">
                 {{ item.id +"："+item.name}}
                 </i-option> </i-select> 
                 </template>
      </FormItem>
      <FormItem prop="knowledgepointId" :label="$t('knowledgepointId')"><!--知识点-->
      <Input v-model="seachForm.knowledgepointId" placeholder="请输入查询文字"></Input>
             <template> 
               <i-select v-model="seachForm.knowledgepointId"  style="width:200px" not-found-text="无课程" @on-change="knowledgepointNumberChange"> 
               <i-option v-for="item in knowledgepointDatas" clearable :value="item.id" v-bind:key="item.id">
                 {{ item.id +"："+item.name}}
                 </i-option> </i-select> 
                 </template>
      </FormItem>
      <FormItem>
        <Button icon="ios-search" @click="seacherSubmit('seacherForm')">查询</Button>
      </FormItem>
    </Form>
    <ButtonGroup v-show="!isEditing">
      <Button icon="ios-add" @click="btnAddClick">新增</Button>
      <Button icon="ios-create" @click="btnEditClick" :disabled="!currentRow">修改</Button>
      <Button icon="ios-trash" @click="btnDelClick" :disabled="!currentRow">删除</Button>
    </ButtonGroup>
    <Table v-show="!isEditing" border highlight-row ref="currentRowTable" @on-current-change="tableCurrentChange" :columns="columns" :data="questionDatas"></Table>
       <FormItem prop="subjectId" :label="$t('subjectId')"><!--课程-->
        <template> 
               <i-select v-model="dataForm.subjectId"  style="width:200px" not-found-text="无课程" @on-change="subjectNumberChange"> 
               <i-option v-for="item in subjectDatas" :value="item.id" v-bind:key="item.id">
                 {{ item.id +"："+item.name}}
                 </i-option> </i-select> 
                 </template>
      </FormItem>
      <FormItem prop="chapterId" :label="$t('chapterId')"><!--章节-->
        <template> 
               <i-select v-model="dataForm.chapterId"  style="width:200px" not-found-text="无章节" @on-change="chaptertNumberChange"> 
               <i-option v-for="item in chapterDatas" clearable :value="item.id" v-bind:key="item.id">
                 {{ item.id +"："+item.name}}
                 </i-option> </i-select> 
         </template>
      </FormItem> 
       <FormItem prop="knowledgepointId" :label="$t('knowledgepointId')"><!--知识点-->
        <template> 
               <i-select v-model="dataForm.knowledgepointId"  style="width:200px" not-found-text="无章节" @on-change="chaptertNumberChange"> 
               <i-option v-for="item in knowledgepointDatas" clearable :value="item.id" v-bind:key="item.id">
                 {{ item.id +"："+item.name}}
                 </i-option> </i-select> 
         </template>
      </FormItem> 
      <FormItem prop="info" :label="$t('info')"><!--题干-->
        <Input v-model="dataForm.info" placeholder="Enter something..."></Input>
      </FormItem>
       <FormItem prop="info" :label="$t('info')">
        <Input v-model="dataForm.info" placeholder="Enter something..."></Input>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="btnSaveClick">保存</Button>
        <Button style="margin-left: 8px" @click="btnCancelClick">取消</Button>
      </FormItem>
    </Form>
  </div>
</template>
<script>
import {getQuestion_selectList, getQuestion_select, addQuestion_select, updateQuestion_select, deleteQuestion_select } from '@/api/question_selects'
import {getSubjectList, getSubject}from '@/api/subjects'
import {getChapterList,getChapter}from '@/api/chapters'
import { getKnowledgepointList, getKnowledgepoint } from '@/api/knowledgepoints'
export default {
  name: 'question_selects',
  data() {
    return {
      message: 'Hello Vue!',
      currentRow: null,
      isEditing: false,
      seachForm: //索引内容
      {   
         id:'',
        name: '',
        info: '',
        knowledgepointId:'',
      },
       extraSeachForm: //索引内容
       {
        subjectId:'',
        chapterId:'',
       },
      dataForm: {},//新增
      data:[],
      columns: //格式
      [   
        {    //表格
        type: 'index',
        width: 60,
        align: 'center'
         }, 
       {
       title: this.$t('id'),
        key: 'id',
         sortable: true,
        }, 
        {
       title: this.$t('subjectId'),
        key: 'subjectId',
        sortable: true,
        }, 
         {
       title: this.$t('knowledgepointId'),
        key: 'knowledgepointId',
        sortable: true,
        },
        {
        title: this.$t('info'),
        key: 'info'
        }, 
        
      ]
      ,
      questionDatas: [],//题目索引列表
      subjectDatas:[],//课程列表
      chapterDatas:[],//章节索引列表
      knowledgepointDatas:[],//知识点索引列表
      //
      chapterDatas2:[],//当前章节列表
      knowledgepointDatas2:[],//当前知识点列表
      
    }
  },
  created() {
    console.log('created message is: ' + this.message);
     this.queryQuestionList();
     this.querySubjectList();
     this.queryChapterList();
     this.queryKnowledgepointList();
  },
  mounted() {
    console.log('mounted message is: ' + this.message);
  },
  methods: {
    seacherSubmit: function() {//
      console.log(this.seacherForm);
      this.queryQuestionList();
    },
     queryQuestionList: function() //根据信息显示知识点列表
     {                                  
      var queryParams = //searchform传递检索内容
      {
        //id:this.seachForm.id,
       // name: this.seachForm.name,
       // info: this.seachForm.info,
      //knowledgepointId:this.seachForm.knowledgepointId,
      isplural:"id",
      1:1,
      2:2,
      3:3,
      4:4,
      };
      getQuestion_selectList(queryParams).then(res => {
        this.questionDatas = res.data.rows;
       
      });
    },
     querySubjectList: function() //显示课程列表
    {
      var querySubjectParams = {
       // id:this.extraSeachForm.subjectId, 
      };
      getSubjectList(querySubjectParams).then
      (subjectRes =>
       {
        this.subjectDatas= subjectRes.data.rows;
     
      }
      );
    },
     queryChapterList: function() //通过课程id,显示章节列表
    {
      var queryChapterParams = 
      {
       subjectId:this.extraSeachForm.subjectId, 
      // id:this.extraSeachForm.chapterId, 
      };
      getChapterList(queryChapterParams).then
      (chapterRes =>
       {
        this.chapterDatas= chapterRes.data.rows;
      
      }
      );
    },
     queryKnowledgepointList: function() //知识点列表
    {
      var queryKnowledgepointParams = {
       chapterId:this.extraSeachForm.chapterId, 
       //id:this.seachForm.knowledgepointId, 
      };
      getKnowledgepointList(queryKnowledgepointParams).then
      (knowledgepointRes =>
       {
        this.knowledgepointDatas= knowledgepointRes.data.rows;
      
      }
      );
    },
    getChapterOfThis:function()//通过chapterid获取章节信息
    {
     this.seachChapterForm.id=this.extraSeachForm.chapterId;
     this.seachChapterForm=getChapter(this.seachChapterForm.id);
     this.extraSeachForm.subjectId= this.seachChapterForm.subjectId;
    },
    subjectNumberChange:function()//课程id变化，取消章节，知识点选定
    {
      this.extraSeachForm.chapterId='';
      this.seachForm.knowledgepointId='',
      this. queryChapterList();
    },
    chaptertNumberChange:function()//章节id变化,取消知识点选定
    {
       this.seachForm.knowledgepointId='',
        // this.getChapterOfThis();
         this.queryKnowledgepointList();
    },

    knowledgepointNumberChange:function()
     {
     this.queryKnowledgepointList();
     } ,
  
    tableCurrentChange: function(currentRow, oldCurrentRow) {
      this.currentRow = currentRow;
    },
    btnAddClick: function() {
      this.dataForm = {};
      this.isEditing = true;
      this.queryChapterList();
    },
    btnEditClick: function() {
      this.dataForm = this.currentRow;
      this.isEditing = true;
      this.queryChapterList();
    },
    btnDelClick: function() {
      this.$Modal.confirm({
        title: '删除',
        content: '确定要删除选中的信息吗?',
        onOk: () => {
          this.delData();
        }
      });
    },
    btnSaveClick: function() {
      if (this.dataForm.id) {
        updateQuestion_select(this.dataForm.id, this.dataForm).then(res => {
          if (res.data && res.data.affectedRows > 0) {
            this.$Message.success('保存成功!');
            this.queryQuestionList();
            this.isEditing = false;
          } else {
            this.$Message.error(res.error);
          }
        });
      } else {
        addQuestion_select(this.dataForm).then(res => {
          if (res.data && res.data.affectedRows > 0) {
            this.$Message.success('保存成功!');
            this.queryQuestionList();
            this.isEditing = false;
          } else {
            this.$Message.error(res.error);
          }
        });
      }
    },
    btnCancelClick: function() {
      this.isEditing = false;
    },
    delData: function() {
      deleteQuestion_select(this.currentRow.id).then(res => {
        if (res && res.affectedRows > 0) {
          this.$Message.success('删除成功!');
          this.queryQuestionList();
        } else {
          this.$Message.error('删除失败!');
        }
      });
    }
  }
}

</script>
